<template>
  <div class="profile">
    <van-nav-bar title="个人中心" />

    <van-cell-group inset class="user-info">
      <van-cell title="学习等级" value="B2" label="CEFR标准" />
      <van-cell title="累计练习" :value="totalInfo.count + '次'" />
      <van-cell title="总计时长" :value="totalInfo.hours + '小时'" />
    </van-cell-group>

    <van-cell-group inset class="stats">
      <van-cell title="学习数据" size="large" />
      <div class="chart-container">
        <canvas ref="scoreChart"></canvas>
      </div>
    </van-cell-group>

    <van-cell-group inset class="history">
      <van-cell title="最近练习" size="large" />
      <van-cell v-for="(item, index) in practiceHistory" :key="index" :title="item.title" :label="item.time"
        :value="item.score + '分'" />
    </van-cell-group>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import Chart from 'chart.js/auto'
const totalInfo = ref({})
const scoreChart = ref(null)

const practiceHistory = ref([
  // { title: '雅思口语模拟', time: '2024-01-20', score: 7.5 },
  // { title: '日常对话练习', time: '2024-01-19', score: 8.0 },
  // { title: '职场英语训练', time: '2024-01-18', score: 7.0 }
])
const fetchPracticeHistory = async () => {
  const response =  await fetch('/api/v1/practice/history', {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    })
    
  const data = await response.json()
  if (data.success) {
    return data.data
  }
  return {}
}

// 获取统计结果
const fetchTotal = async () => {
  const response = await fetch('/api/v1/practice/total', {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    })

  const data = await response.json()
  if (data.success) {
    return data.data
  }
  return 0 
}

const fetchStat = async () => {
  const response = await fetch('/api/v1/practice/stat', {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' },
  })

  const data = await response.json()
  if (data.success) {
    return data.data
  }
  return 0
}
onMounted(async () => {
  let {count}  = await fetchTotal()
  totalInfo.value.count = count
  totalInfo.value.hours = count * 0.5
  let {date, score} = await fetchPracticeHistory()
  const ctx = scoreChart.value.getContext('2d')
  new Chart(ctx, {
    type: 'line',
    data: {
      labels: date,
      datasets: [{
        label: '练习得分',
        data: score,
        borderColor: 'var(--accent-color)',
        backgroundColor: 'rgba(59, 130, 246, 0.1)',
        borderWidth: 2,
        pointBackgroundColor: 'var(--accent-color-light)',
        pointBorderColor: 'var(--accent-color)',
        pointRadius: 4,
        tension: 0.2
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          labels: {
            color: 'var(--text-primary)',
            font: {
              family: "'SF Pro Display', system-ui"
            }
          }
        }
      },
      scales: {
        x: {
          grid: {
            color: 'rgba(255, 255, 255, 0.05)'
          },
          ticks: {
            color: 'var(--text-secondary)'
          }
        },
        y: {
          grid: {
            color: 'rgba(255, 255, 255, 0.05)'
          },
          ticks: {
            color: 'var(--text-secondary)'
          },
          min: 0,
          max: 10
        }
      }
    }
  })
  let stats = await fetchStat()
  for (const item of stats) {
    let obj = {title: '', type:item.mode,time: item.createdAt, score: item.score}
    if (item.mode == 'conversation') {
      obj.title = '日常对话练习'
    } else if (item.mode == 'business') {
      obj.title = '职场英语训练'
    } else {
      obj.title = '雅思口语模拟'
    }
    practiceHistory.value.push(obj)
  }
})
</script>

<style scoped>
.profile {
  padding-bottom: 20px;
  background-color: var(--primary-bg);
  color: var(--text-primary);
  max-width: 768px;
  /* max-height: 1024px; */
  width: 100%;
  margin: 0 auto;
  overflow-y: auto;
}

.user-info {
  margin: 20px 16px;
  max-width: 100%;
  padding: 0;
  background-color: var(--secondary-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.stats {
  margin: 20px 16px;
  max-width: 100%;
  padding: 0;
  background-color: var(--secondary-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}

.chart-container {
  height: 200px;
  padding: 10px;
}

.history {
  margin: 20px 16px;
  max-width: 100%;
  padding: 0;
  background-color: var(--secondary-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
}
</style>